<template>
  <div class="shopCartBar">
    <div class="whole" @click="checkBtn">
      <img
        src="~assets/img/cart/tick.svg"
        alt=""
        :style="{ backgroundColor: isAllCheck ? '#ff8e96' : 'gray' }"
      />&nbsp;
      <span>全选</span>
    </div>
    <div class="account">合计: ￥{{ accountPrice }}</div>
    <div class="buy" @click="calcClick">去结算({{ accountItem }})</div>
  </div>
</template>

<script>
export default {
  props: {
    cartListData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      // isCheck: Boolean,
    };
  },
  computed: {
    accountPrice() {
      // let account = 0;
      // for (const item of this.cartListData) {
      //   if (item.check) account += item.price * item.count;
      // }
      // return account.toFixed(2);
      return this.cartListData
        .filter((item) => {
          return item.check;
        })
        .reduce((pre, item) => {
          return (pre += item.price * item.count);
        }, 0)
        .toFixed(2);
    },
    accountItem() {
      // let account = 0;
      // for (const item of this.cartListData) {
      //   if (item.check) account += item.count;
      // }
      // return account;

      //多练习数组的操作符
      return this.cartListData
        .filter((item) => {
          return item.check;
        })
        .reduce((pre, item) => {
          return (pre += item.count);
        }, 0);
    },
    isAllCheck() {
      return this.cartListData.every((item) => item.check);
    },
  },
  //这玩意放在updated里面判断最方便了，可是太影响性能
  updated() {
    // for (const item of this.cartListData) {
    //   if (!item.check) this.isCheck = false;
    //   else this.isCheck = true;
    // }
  },
  methods: {
    checkBtn() {
      // console.log(this.shopItem.check, this.isCheck);
      // 这里如果考虑回mutation修改的话就太麻烦了，要遍历或者传id做find查找，人懒了，直接本地改了
      // this.$store.commit('checkChange',shopItem)
      // console.log(this.isAllCheck);
      if (this.isAllCheck) {
        for (const item of this.cartListData) {
          item.check = false;
        }
      } else {
        for (const item of this.cartListData) {
          item.check = true;
        }
      }
      // this.isCheck = !this.isCheck;
    },
    calcClick() {
      this.$toast.show("结算中...", 2000);
    },
  },
};
</script>

<style scoped>
.shopCartBar {
  display: flex;
  position: fixed;
  width: 100%;
  height: 40px;
  bottom: 49px;
  text-align: center;
  line-height: 40px;
  background-color: #edebec;
}
.whole {
  flex: 2;
}
.whole img {
  width: 30%;
  vertical-align: middle;
}
.account {
  flex: 4;
}
.buy {
  flex: 3;
  background-color: #fc4400;
  color: white;
}
</style>